离线设计: 让您的应用真正做到随时可用

全球有近 16 亿人生活在移动互联网网络之外。在出行时，还有数百万人的网络信号时断时续。Wi-Fi 连接可能覆盖不足，移动数据的成本也可能过高。例如，在乌干达，互联网接入可能会占据每月开销的近 11%。生活在高价网络区域的人们经常关闭移动数据以便节省开支。我们经过研究发现，世界各地的人们，无论是在拉各斯还是洛杉矶，都会有意或无意地经常下线。离线状态是当今数字体验的重要组成部分。

离线设计属于全新的设计领域，这赋予了设计师很大的创新空间和创造力，为受众提供最适合其需求的通知和选项。我们的设计师 Rachel IIan Simpson 和 Pendar Yousefi 制定了这些 Material Design 指南，帮助您在全球化的产品中构建出更好的离线功能。

>> Material Design: 离线状态

https://material.io/design/communication/offline-states.html#offline-functionality

清楚地显示离线功能

△ 在应用或设备脱机后，相应地显示脱机图标

离线设计在移动产品中尚未实现标准化，但您可以使用一些规律来帮助人们了解产品的离线功能。例如，设计人员应通过显示与 “离线” 一词配对的脱机图标来指示何时可以离线使用应用或网站。具体而言，当用户下载内容以供离线使用但仍然在线时，产品应显示 “脱机可用” 图标。当手机本身离线时，产品还应显示离线图标。因此，无论用户连接到互联网与否，离线图标依然是提示系统中的重要部分。

确保离线信息传达准确

△ 如果无法取得网络连接，请显示 “无法连接至网络/云端” 图标

将文本与视觉效果配对 —— 尤其需要考虑按钮和其他可用功能，有助于提高整体可用性。例如，当失去在线功能时，将 “无云端连接” 图标与“无法连接至互联网”等明文文案配对，以便让用户了解图标的含义。图标这样的非文本信息还可以帮助文化程度不足人群和其他母语的使用者理解 UI。

允许下载内容以备将来离线使用

△ 在提供文件离线功能时，最佳做法是在下载按钮旁边注明文件大小

某些国家或地区的数据流量费用可能会超过普通用户月收入的 10%，因此显示文件大小可以帮助用户确定他们是否希望在单次下载上消费这些流量。此外，低成本手机通常只配备了很少的存储空间，您可以通过图标与文案的组合、“下载” 按钮和文件大小提示的组合等，指示可供用户将来离线使用的内容有多大。设计师还应该允许用户轻松删除离线的文件，因为用户可能会想要节省手机上的存储空间。正如上文中 Material Design 离线状态设计指南所示，您需要显示删除操作按钮，其中包含已下载文件的删除图标，并显示通过删除文件将会节约出多少空间。

从正在下载状态到离线就绪状态的过渡

△ 下载离线内容时，使用动画帮助用户确立期望下载时间

用户可能会放弃那些需要很长时间才能加载的文件，因此您最好为下载活动设置预期时间。使用动画显示文件正在被下载，以及何时可以脱机使用。在下载文件时，请显示下载所需的秒数，让用户可以取消或暂停下载。当然，不要忘记在下载完成的时候告知用户。

让脱机文件易于被用户发现

△ 在主屏幕上提供菜单入口，帮助用户找到他们的脱机文件

如果离线是您应用的主要功能，请考虑在主屏幕上制作标签或按钮，以帮助用户轻松找到所有离线文件。应用通常会在不同位置列出离线功能 (例如 “更多”、“设置” 或 “选项”)。无论您决定把它们放在哪里，都要注意让脱机文件处于可以被用户发现的状态。

在连接恢复时通知用户

△ 当应用或内容再次上线时提醒用户

人们经常将手机切换到飞行模式或关闭蜂窝数据，以节省流量、费用和电量。您在设计时应该考虑这些使用场景。您可以在应用或内容重新上线并能够完成请求时通知用户。例如，视频、搜索查询或消息可以排队，这样在恢复网络连接时，用户就可以接到通知，了解到让他们等待的内容或者功能又可以使用了。这种方法可以让系统在用户离线时为其提供内容，并且保留用户的信任度和活跃度。

请务必在 UI 中传达这些操作和状态更新。使用快捷提示 —— 如上图中屏幕底部的简单色块与单行文案的组合，显示应用正在等待网络连接以便下载。例如，显示“您的搜索结果已准备就绪”文本的快捷提示会通知用户，他们的查询已经有了结果。

离线状态依然能给用户带来愉悦体验

离线设计可以通过提升用户满意度并改善连接受限用户的可访问性，将已经广受欢迎的应用提升到新的高度。请鼓励您的团队，让大家将离线状态视为创新的机遇，而不是障碍。考虑一些常见的用例，让用户在可能会失去互联网连接时，仍然可以充分利用您的产品。例如，您的应用可以帮助忙碌的父母在前往市场的途中搜索食谱。或者通过允许查看朋友和家人的照片来帮助离家的游子找到一点家的感觉 —— 即使没有稳定的互联网连接。离线设计是理解和响应用户需求的重要部分，在为全球受众进行产品构建时尤其如此。

您的应用是否在离线时也能为用户提供有用的信息，并能在恢复网络连接后再次让用户回到互动流程中来呢？请在下面分享您的经验或者疑惑，我们希望大家的应用能一直 “活跃”，不论是在线或者离线的时候。

 点击屏末 | 阅读原文 | 了解 Material Design 中关于离线状态设计的更多细节

推荐阅读：